<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .current {
            background-color: aquamarine;
        }
    </style>

</head>

<body>
    <div></div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        // xx.on(events,[selector],fn)
        // events:一个或多个用空格分隔的事件类型，如click，或keydown
        // selector:元素的子元素选择器
        // fn:回调函数 绑定在元素身上的侦听函数
        //  事件处理
        $(function() {
            // 单个事件绑定
            $("div").click(function() {
                $(this).css("background", "purle");
            });
            // 事件处理on() 可以绑定一个或多个事件
            $("div").on({
                mouseenter: function() {
                    $(this).css("background", "blue");
                },
                click: function() {
                    $(this).css("background", "purple");
                },
                mouseleave: function() {
                    $(this).css("background", "pink");
                }
            });
            // 如果两个事件处理方式相同可以这样写
            $("div").on("mouseenter mouseleave", function() {
                $(this).toggleClass("current");
            });
            // on可以事件委派
            $("ul").on("click", "li", function() {
                alert(ha);
            });
            // click是绑定在ul身上的，但是触发的对象是ul里面的li
            $("ul").on("click", "li", function() {
                alert(ha);
            });
            var li = $("<li>我是后来的</li>");
            $("ul").append(li);

            // 事件解绑 off
            $("div").off(); //解除div所有事件
            $("div").off("click"); //解除div身上的点击事件
            $("ul").off("click", "li");
            // one()但是它只能触发事件一次
            $("p").one("click", function() {
                alert(h);
            });
        })
    </script>

</body>

</html>